<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户故事5</title>
    <!-- 引入 element-ui 的样式文件 -->
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
        .zebra-table tbody tr:nth-child(even) {
            background-color: #edecec; /* 设置偶数行的背景颜色 */
        }
</style>
<link rel="stylesheet" href="../../css/table.css">

</head>

<body>
    <div id="app">
        <h2 style="text-align: center;">拨款发放</h2>
        <el-row>
            <el-col :span="4">
                <el-input v-model="donationId" placeholder="对申请钱款单号进行检索"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button @click="uh">查询</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="agreeSelectedRows">钱款发放</el-button>
            </el-col>


        </el-row>
        <div><h4>已选择的申请钱款单号：{{selectedRows.map(row => row.donationId).join(',')}}</h4></div>
        <el-table :data="donationList" :default-sort="{prop: 'deadline', order: 'ascending'}"
            @selection-change="handleSelectionChange" class="zebra-table">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="募捐单" prop="donationId"></el-table-column>
            <el-table-column label="募捐人" prop="donationImage">
                <template slot-scope="scope">
                    <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                    <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
            </el-table-column>
            <el-table-column label="募捐原因" prop="donationReason"></el-table-column>
            <el-table-column label="截止时间" prop="deadline" sortable>
                <template slot-scope="scope">
                    {{ calculateCompletion(scope.row.deadline) }}
                </template>
            </el-table-column>
            <el-table-column label="救助金额" prop="donationAmount" sortable></el-table-column>
            <el-table-column label="已募金额" prop="donatedAmount" sortable></el-table-column>
            <!-- 要改字段 -->
            <el-table-column label="剩余金额" prop="donatedAmount" sortable></el-table-column>

            <el-table-column label="申请单号" prop="requestMoneyId">
                <template slot-scope="scope">
                  <span style="color: #B8860B">{{ scope.row.requestMoneyId }}</span>
                </template>
              </el-table-column>
            <el-table-column label="发起时间" prop="time" sortable>
                <template slot-scope="scope">
                    {{ calculateCompletion(scope.row.time) }}
                </template>
            </el-table-column>
            
            <el-table-column label="金额" prop="donatedAmount" sortable></el-table-column>
            <el-table-column label="说明" prop="evaluate" sortable></el-table-column>
            <!--  -->
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="操作" fixed="right" width="180px">
                <template slot-scope="scope">
                    <div class="btn-group" style="display: flex; justify-content: space-between;">
                        <el-link :href="'/api/donations/downloadMaterials?donationId=${scope.row.donationId}'"
                            type="primary">材料下载</el-link>
                        <el-button @click="agreeRequest(scope.row.requestMoneyId)">钱款发放</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

    </div>

    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                donationList: [],
                minAge: '',
                maxAge: '150',
                status: '',
                evaluateInput: '',
                donationId: '',
                filterStatus: '1',
                List: [],
                // selectedRows数组来存储选择的行
                selectedRows: [],
            },
            created() {
                this.search(); // 页面加载时自动触发查询
            },
            methods: {
                uh(){
                    if (this.donationId === "") {
                        console.log(this.donationList = this.List);
                        return this.filterData(); // 不进行筛选
                    }
                    this.donationList = this.List;
                    this.donationList = this.donationList.filter(item => {
                        if (typeof item.donationId === 'number' && !isNaN(parseInt(this.donationId))) { // 判断类型是否相同
                            return item.donationId === parseInt(this.donationId); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.donationList);
                },
                handleSelectionChange(rows) {
                    this.selectedRows = rows;
                },
                agreeSelectedRows() {
                    // 遍历已选择的行并执行agreeRequest方法
                    this.selectedRows.forEach(row => {
                        this.agreeRequest(row.requestMoneyId);
                    });
                },

                //钱款发放
                agreeRequest(requestMoneyId) {
                    const formData = new FormData();
                    formData.append('requestMoneyId', parseInt(requestMoneyId));
                    axios.post('http://localhost:8888/api/donations/agreeAndGrant', formData)
                        .then(response => {
                            if (response.data.code === 0) {
                                alert('钱款发放成功');
                                this.search();
                                // 刷新数据或者其他操作
                            } else {
                                alert('钱款发放失败：' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('请求出错：', error);
                        });
                },
                //页面
                search() {
                    axios.get('http://localhost:8888/api/donations/getRequestMoneyVo')
                        .then(response => {
                            this.donationList = [];
                            this.List = response.data.data
                            this.donationList = this.List;
                            // this.calculateCompletion();
                            this.filterData(); // 添加筛选方法
                        })
                        .catch(error => {
                            // 请求失败时的处理
                            console.error('请求出错：', error);
                        });
                },
                // 筛选
                filterData() {
                    if (this.filterStatus === "") {
                        console.log(this.donationList = this.List);
                        return this.donationList = this.List; // 不进行筛选
                    }
                    this.donationList = this.List;
                    this.donationList = this.donationList.filter(item => {
                        if (typeof item.status === 'number' && !isNaN(parseInt(this.filterStatus))) { // 判断类型是否相同
                            return item.status === parseInt(this.filterStatus); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.donationList);
                },
                calculateCompletion(deadline) {
                    const timestamp = deadline;
                    const date = new Date(timestamp);

                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                    return formattedDate;
                }
            }


        });
    </script>
</body>

</html>